import React from "react";
import { connect } from 'react-redux'

// connect是个高阶组件，可以将store中的state和dispatch映射到本组件的props里
export default connect(
    // 参数1：mapStateToProps 将state映射到props
    state => ({ count: state }),
    // 参数2：mapDispatchToProps 将dispatch映射到props，若不写则将整个dispatch映射到props
    {
        add: () => ({ type: 'ADD' }),
        minus: () => ({ type: 'MINUS' })
    }
)(
    class Pre07ReactRedux extends React.Component {

        render() {
            console.log('~~this.props', this.props)
            const { count, dispatch, add, minus } = this.props
            return <div>
                <h3>ReactRedux</h3>
                <div>获取的state的值：{count}</div>
                {/* 默认映射的dispatch */}
                {/* <button onClick={() => dispatch({ type: 'ADD' })}>add</button> */}
                <button onClick={add}>add</button>
                <button onClick={minus}>minus</button>
            </div>
        }
    }
) 